import React, { useState ,useRef } from 'react';
import { Search, Swiper, Image, CountDown, Space, Flex, Loading ,Cell, Dialog} from 'react-vant';
import './index.less'
import { Cart } from '@react-vant/icons'
import {history} from 'umi'

const Home = () => {
  let [scrol,setScrol] = useState(0)
  let inputll = useRef(null)
  let [jiazai,setJiazai] = useState(false)
  let [num, setNum] = useState(4)
  const [value, setValue] = useState('');
  let tuilist = ['推荐', '人气', '平价']
  let [tui, setTui] = useState('推荐')
  let list2 = [
    { id: 'w1', name: '河北梨约3斤', price: 12, img: 'https://img1.baidu.com/it/u=1667146199,1597758813&fm=253&fmt=auto&app=138&f=PNG?w=500&h=308', type: '推荐' },
    { id: 'w2', name: '河北苹果约3斤', price: 10, img: 'https://img0.baidu.com/it/u=66242029,3902093238&fm=253&fmt=auto&app=138&f=PNG?w=500&h=527', type: '推荐' },
    { id: 'w3', name: '牛排约1200克', price: 12, img: 'https://img1.baidu.com/it/u=674164040,1623896401&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=348', type: '推荐' },
    { id: 'w4', name: '新鲜青菜', price: 5, img: 'https://img0.baidu.com/it/u=4111674113,999226305&fm=253&fmt=auto&app=138&f=JPG?w=642&h=500', type: '推荐' },
    { id: 'w5', name: '新鲜肘子', price: 50, img: 'https://img2.baidu.com/it/u=3155574897,3236444257&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=469', type: '人气' },
    { id: 'w6', name: '澳洲大虾', price: 80, img: 'https://img2.baidu.com/it/u=2112790983,749812820&fm=253&fmt=auto&app=138&f=JPEG?w=704&h=500', type: '人气' },
    { id: 'w7', name: '新疆哈密瓜', price: 99, img: 'https://img2.baidu.com/it/u=722848565,372000228&fm=253&fmt=auto&app=138&f=JPEG?w=688&h=500', type: '人气' },
    { id: 'w8', name: '大排骨肉多', price: 75, img: 'https://img0.baidu.com/it/u=4194205188,3688699380&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=676', type: '人气' },
    { id: 'w9', name: '樱桃肥美', price: 6, img: 'https://img1.baidu.com/it/u=2491339773,845626863&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500', type: '平价' },
    { id: 'w10', name: '东坡肘子', price: 62, img: 'https://img2.baidu.com/it/u=709835414,3299656452&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313', type: '平价' },
    { id: 'w11', name: '新鲜西蓝花', price: 3, img: 'https://img2.baidu.com/it/u=422899166,830902101&fm=253&fmt=auto&app=138&f=PNG?w=662&h=500', type: '平价' },
    { id: 'w12', name: '火红辣椒', price: 1, img: 'https://img1.baidu.com/it/u=65959391,2498455403&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313', type: '平价' },
  ]
  let imgs = [
    { id: 1, img: 'https://img0.baidu.com/it/u=2917561906,3649859264&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500' },
    { id: 2, img: 'https://img1.baidu.com/it/u=2764992822,2364351068&fm=253&fmt=auto&app=138&f=JPEG?w=709&h=500' },
    { id: 3, img: 'https://img0.baidu.com/it/u=1470427417,3463519503&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500' },
  ]
  let list1 = [
    { id: 1, name: '水蜜桃', title: '约500克', img: 'https://img1.baidu.com/it/u=2017971842,3513242633&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500', price1: 30.00, price2: 28.00 },
    { id: 3, name: '苹果', title: '约500克', img: 'https://img0.baidu.com/it/u=66242029,3902093238&fm=253&fmt=auto&app=138&f=PNG?w=500&h=527', price1: 5.00, price2: 3.00 },
    { id: 2, name: '橙子', title: '约500克', img: 'https://img1.baidu.com/it/u=1458226084,3628114901&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500', price1: 10.00, price2: 8.00 },
    { id: 4, name: '雪花牛肉', title: '约500克', img: 'https://img1.baidu.com/it/u=4290238307,4081372268&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=313', price1: 30.00, price2: 28.00 },
    { id: 5, name: '生菜', title: '约500克', img: 'https://img0.baidu.com/it/u=1392859118,3550552716&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=396', price1: 30.00, price2: 28.00 },
    { id: 6, name: '红草鱼', title: '约500克', img: 'https://img0.baidu.com/it/u=2800501359,3437724503&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', price1: 30.00, price2: 28.00 },
  ]
  let list3 = [
    { id: 'c1', name: '青椒炒菜比肩酒店大厨', img: 'https://img0.baidu.com/it/u=572055031,2567494151&fm=253&fmt=auto&app=138&f=JPEG?w=664&h=500', time: 20, num: 200 },
    { id: 'c2', name: '青椒炒菜比肩酒店大厨', img: 'https://img2.baidu.com/it/u=379462010,3723930854&fm=253&fmt=auto&app=138&f=JPEG?w=484&h=300', time: 20, num: 200 },
    { id: 'c3', name: '青椒炒菜比肩酒店大厨', img: 'https://img1.baidu.com/it/u=1290756734,3666182031&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=426', time: 20, num: 200 },
    { id: 'c4', name: '青椒炒菜比肩酒店大厨', img: 'https://img0.baidu.com/it/u=1545279653,1700737249&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333', time: 20, num: 200 },
    { id: 'c5', name: '青椒炒菜比肩酒店大厨', img: 'https://img0.baidu.com/it/u=4181306774,3800739234&fm=253&fmt=auto&app=138&f=JPEG?w=666&h=500', time: 20, num: 200 },
    { id: 'c6', name: '青椒炒菜比肩酒店大厨', img: 'https://img2.baidu.com/it/u=1151704761,1673954785&fm=253&fmt=auto&app=138&f=JPEG?w=429&h=300', time: 20, num: 200 },
    { id: 'c7', name: '青椒炒菜比肩酒店大厨', img: 'https://img2.baidu.com/it/u=1269661363,1116478166&fm=253&fmt=auto&app=138&f=JPEG?w=524&h=350', time: 20, num: 200 },
    { id: 'c8', name: '青椒炒菜比肩酒店大厨', img: 'https://img0.baidu.com/it/u=2326374907,2735803034&fm=253&fmt=auto&app=138&f=JPEG?w=733&h=500', time: 20, num: 200 },
    { id: 'c9', name: '青椒炒菜比肩酒店大厨', img: 'https://img1.baidu.com/it/u=48806108,746148307&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500', time: 20, num: 200 },
    { id: 'c10', name: '青椒炒菜比肩酒店大厨', img: 'https://img2.baidu.com/it/u=3662653783,987530526&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333', time: 20, num: 200 },
  ]
  // window.onscroll = ()=>{
  //   let scrollHeight = inputll.targ.scrollTop
  //   let cil = document.documentElement.clientHeight
  //   let bodyHeight = document.body.clientHeight
  //   let kl = bodyHeight - Math.floor(scrollHeight)
  //   if(kl < -455){
  //     console.log(kl);
  //   }
  // }
  //触底加载
  function gun(e){
    setScrol(e.scrollTop)
    if(Math.floor(e.scrollTop)+e.clientHeight>=e.scrollHeight-1){
      setJiazai(true)
      let timer =  setTimeout(() => {
        setNum(num+4)
        setJiazai(false)
        clearTimeout(timer)
      }, 2000);
    }
  }
  //置顶
  function zhiding1(){
    inputll.current.scrollTo({
      top:0,
      behavior:'smooth'
    })
  }
  //弹出提示
  function Tanchu(){
    Dialog.alert({
      // title: '标题',
      closeable: true,
      theme: 'round-button',
      width:'50vw',
      message: (
        <div style={{ textAlign: 'center', padding: '3vw' }}>
          已加入购物车
        </div>
      ),
    })
  }
  return <div className='shouBox' ref={inputll} onScroll={(e)=>gun(e.target)}>
    <div className='soubox'>
      <Search shape="round" value={value} onChange={setValue} placeholder="请输入搜索关键词" />
    </div>
    <div className='lunbox'>
      <Swiper autoplay={3000}>
        {imgs.map((image) => (
          <Swiper.Item key={image.id}>
            <Image lazyload src={image.img} style={{ width: '100vw', height: '25vh' }} />
          </Swiper.Item>
        ))}
      </Swiper>
    </div>
    <div className='fenbox1'>
      <div onClick={()=>history.push('/sgfenlei')}>
        <img src={require('../../../public/wzcimg/苹果.svg')} alt="" />
        <p>水果</p>
      </div>
      <div>
        <img src={require('../../../public/wzcimg/蔬菜2.svg')} alt="" />
        <p>蔬菜</p>
      </div>
      <div>
        <img src={require('../../../public/wzcimg/海鲜.svg')} alt="" />
        <p>海鲜</p>
      </div>
      <div>
        <img src={require('../../../public/wzcimg/肉禽蛋.svg')} alt="" />
        <p>肉禽蛋</p>
      </div>
    </div>
    <div className='timeBox'>
      <div className='timeheadbox'>
        <span className='span1'>限时抢购</span>
        <span className='span2'>
          <div className="demo-count-down">
            <CountDown time={4 * 30 * 60 * 60 * 1000} millisecond format="HH:mm:ss:SS">
              {(timeData) => (
                <>
                  <span className="block">{timeData.hours}</span>
                  <span className="colon">:</span>
                  <span className="block">{timeData.minutes}</span>
                  <span className="colon">:</span>
                  <span className="block">{timeData.seconds}</span>
                </>
              )}
            </CountDown>
          </div>
        </span>
        <span onClick={()=>history.push('/xianshi')} className='span3'>更多</span>
      </div>
      <div class="nav">
        <div class="list">
          {
            list1.map(item => {
              return <div class="item" key={item.id}>
                <img src={item.img} alt="" onClick={()=>history.push('/xiangqing')}/>
                <p>
                  <span className='span4'>{item.name}</span>
                  <span className='span5'>{item.title}</span>
                </p>
                <div className='footbox'>
                  <div className='box1'>
                    <p className='p1'>￥{item.price2}.00</p>
                    <p className='p2'>￥{item.price1}.00</p>
                  </div>
                  <div className='box2'><Cart fontSize={'8vw'}  onClick={()=>Tanchu()} ></Cart></div>
                </div>
              </div>
            })
          }

        </div>
      </div>

    </div>
    <div className='tuiBox'>
      <div className='headerbox'>
        {
          tuilist.map(item => {
            return <span onClick={() => setTui(item)} className={tui == item ? 'mk' : ''} key={item}>{item}</span>
          })
        }
      </div>
      <div className='sdBox'>
        {
          list2.filter(item => item.type == tui).map(item => {
            return <div key={item.id} className='headd'>
              <div>
                <div className='left'><img src={item.img} alt="" /></div>
                <div className='right'>
                  <p>{item.name}</p>
                  <p className='p1'>￥{item.price}.00</p>
                </div>
              </div>
              <div className='ddbb'><Cart fontSize={'8vw'}   ></Cart></div>
            </div>
          })
        }
      </div>
    </div>
    <div className='caipuBox'>
      <h3>菜谱</h3>
      {
        list3.slice(0, num).map(item => {
          return <div className='cbox' key={item.id}>
            <img src={item.img} alt="" />
            <p className='p1'>{item.name}</p>
            <p className='p2'><span className='s1'>{item.time}分钟</span><span className='s2'>{item.num}人做过</span></p>
          </div>
        })
      }
    </div>
    {jiazai ? <div className='Footbox'>
      <Flex className='bb1'>
        <Flex.Item span={8}>
          <Loading />
        </Flex.Item>
      </Flex>
    </div>:''}
    {scrol > 50?<button className='zhid' onClick={()=>zhiding1()}>置顶</button>:''}
  </div>;
}


export default Home;